<template>
    <div class="main">
        <!-- 推荐歌单 -->
        <div>
            <p class="title">推荐歌单</p>
            <van-row gutter="6">
                <van-col span="8" v-for="item in reList" :key="item.id">
                    <van-image width="100%" height="100%" :src="item.picUrl" />
                    <p class="song_name">{{ item.name }}</p>
                </van-col>
            </van-row>
        </div>
        <!-- 最新音乐 -->
        <div>
            <p class="title">最新音乐</p>
            <van-cell-group>
                <song-item  v-for="(item, i) in newMusicList" :key='i' :title="item.name" :label='item.song.artists[0].name + item.name' :id='item.id'></song-item>
            </van-cell-group>
        </div>
  </div>
</template>

<script>
import {recommendMusicAPI, newMusicAPI} from '@/api'
import songItem from '@/components/songItem.vue'
    export default {
  components: { songItem },
        data() {
            return {
                reList: [],  // 推荐歌单
                newMusicList: []     // 最新音乐
            }
        },
        created(){
            this.getdata()
            this.getdata1()
        },
        methods:{
            // 获取首页推荐数据
            async getdata(){
                let res = await recommendMusicAPI({
                    limit: 6
                })
                // console.log(res, 'res')
                this.reList = res.data.result
            },

            // 获取首页最新音乐数据
            async getdata1(){
                let res = await newMusicAPI({
                    limit: 20
                })
                // console.log(res.data.result, 'res')
                this.newMusicList = res.data.result
            }
        }
    }
</script>

<style scoped>

.title{
  background-color: rgb(238,238,238);
  margin: 0;
  margin-bottom: 10px;
  padding: 10px
}
.main{
    padding-bottom: 50px;
}
.song_name{
    /* 文本溢出隐藏 */
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
}
.van-cell{
    font-size: 16px;
}
</style>